<template>
    <div class="app-container">
        <div class="warp_padding">  

            <div class="head-container">
                <!-- 搜索 -->
                <el-input v-model="formDate.buttonName" clearable placeholder="输入权限名称搜索" style="width: 160px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/>

                <!-- <el-input v-model="formDate.roleSign" clearable placeholder="输入权限别名搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/> -->

                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
                <!-- 新增 -->
                <div style="display: inline-block;margin: 0px 2px;">
                  <el-button
                    v-if="checkPermission(['admin','permission_all','permission_add'])"
                    class="filter-item"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="add">新增</el-button>
                  <eForm ref="form" :is-add="isAdd"/>
                </div>
            </div>
            
            <el-table :data="lists" highlight-current-row v-loading="listLoading"  style="width: 100%;" max-height="650">
                <el-table-column  width="10">
                </el-table-column>
                <el-table-column type="index" width="60">
                </el-table-column>

                <el-table-column prop="buttonName" label="名称" sortable :show-overflow-tooltip="true" min-width="150"></el-table-column>
                
                <el-table-column prop="alias" label="别名"></el-table-column>

                <!-- <el-table-column prop="perDesc" label="说明" sortable></el-table-column> -->
                
                <el-table-column prop="addTime" label="创建日期" :show-overflow-tooltip="true" min-width="140">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime | formatDate}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" v-if="checkPermission(['admin','permission_all','permission_edit'])" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row.id)" v-if="checkPermission(['admin','permission_all','permission_dell'])">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <!-- <el-button type="danger" size="mini" @click="batchRemove" :disabled="this.sels.length===0" class="remove">批量删除</el-button> -->

            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>

    </div>
</template>


<script>
import { formatDate } from '@/utils/formatDate.js';
import checkPermission from '@/utils/permission' 
import treeTable from '@/components/TreeTable'
import initData from '@/mixins/initData'
import { del, menusList, delBatch } from '@/api/menu'
import { parseTime } from '@/utils/index'
import eHeader from './module/header'
import eForm from './module/form'
import { getTree } from '@/api/request'

export default {
  components: { eHeader, eForm, treeTable },
  mixins: [initData],
  data() {
    return {
        columns: [
            {
              text: '名称',
              value: 'name'
            }
        ],
        delLoading: false,

        pageCount: 0,
        total:0,  //总数
        listLoading: false,
        lists: [],
        pagerCount:11,   //页码按钮的数量，当总页数超过该值时会折叠,大于等于 5 且小于等于 21 的奇数
        formDate:{
            pageNo: 1,  
            pageSize:10,
            permissionGrade:2,
            buttonName:''   
        },
        isAdd:true,
        editForm:{}
        
    }
  },
  filters: {
    formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
    }, 
  },
  created() {
    this.$nextTick(() => {
        this.init()
    })
  },
  methods: {
    parseTime,
    checkPermission,
    toQuery(){
        this.init()
    },
    add(){
        this.isAdd = true
        this.$refs.form.getMenus()
        this.$refs.form.form = { buttonName: '', alias: '', pid: -2,  isDisable:'0', permissionGrade: '2' },
        this.$refs.form.dialog = true
    },
    handleCurrentChange(val) {
        this.formDate.pageNo = val;
        this.init()
    },
    handleSizeChange(val) {
        this.formDate.pageSize = val
        this.init()
        // console.log(`page ${val}`);
    },
    init(){
        menusList(this.formDate).then(res => {
            if (res.code == 2000) {
               let { list, total } = res.data
               this.lists = list
               this.total = total
            }else{
                this.$message({
                    message: '服务器错误！获取数据失败',
                    type: 'error'
                });
            }
        })
    },
    handleEdit: function (index, row) {
        this.$refs.form.dialog = true
        this.isAdd = false
        this.$refs.form.getMenus()
        this.$refs.form.form = Object.assign({}, row);
    },
    handleDel(index,ID){
        let ids = [];
        ids.unshift(ID)
        this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    delBatch(ids).then(res => {
                        if (res.code == '2000' || 2000) {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            /*let pageTotal = this.total--
                            let pages = Math.ceil(pageTotal / (this.formDate.pageSize))
                            this.handleCurrentChange(pages)    */ 
                            console.log(this.lists.length)
                            // console.log(this.formDate.pageNo)
                            if (this.lists.length == 1 && this.formDate.pageNo != 1) {
                                this.formDate.pageNo = this.formDate.pageNo -1
                            }
                            this.init()                       
                        }else{
                            this.listLoading = false;
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
                   
                }).catch(() => {
        });
    }
    
  }
}
</script>

<style lang="scss" scoped>

</style>
